<script lang="tsx">
import {
  defineComponent,
  ref,
  computed,
  type PropType,
  type ExtractPropTypes
} from 'vue'
import { ElOption, ElColorPicker } from 'element-plus'
import { merge } from 'lodash-es'
import {
  omitSelfProps,
  makeValue,
  IgnoreProps,
  type BaseType,
  type SimpleKeyValueObject,
  type SimpleKeyArrayObject
} from './utils'
export const oColorpickerSelfProps = {
  formData: {
    type: Object,
    required: true
  },
  prop: {
    type: String,
    required: true
  },
  perm: {
    type: String,
    default: 'true'
  },
  visiable: {
    type: Boolean,
    default: true
  },
  ...IgnoreProps
}
export const oColorpickerProps = {
  ...ElColorPicker.props,
  ...oColorpickerSelfProps
}
export type oColorpickerPropsType = ExtractPropTypes<typeof oColorpickerProps>
const oColorpicker = defineComponent({
  name: 'one-colorpicker',
  props: oColorpickerProps,
  // inheritAttrs: false,
  components: { ElColorPicker },
  setup(props: oColorpickerPropsType, context) {
    const inProps = omitSelfProps<
      oColorpickerPropsType,
      typeof oColorpickerSelfProps
    >(props, oColorpickerSelfProps)

    return () => (
      <ElColorPicker
        {...inProps}
        class={oColorpicker.name}
        v-model={props.formData![props.prop!]}
        v-slots={context.slots}
      ></ElColorPicker>
    )
  }
})
export default oColorpicker
</script>
<style lang="scss" scoped></style>
